<template>
    <div>
        <h2>2.Vuex提供的辅助函数</h2>
        <!-- 3.直接使用数据 -->
        <p>{{num}}</p>
        <p>{{title}}</p>
        <p>{{dbNum}}</p>
        <hr>
        <button @click="addNum(10)">直接调用注入Mutations函数</button>
        <button @click="add">通过自己的方法调用注入Mutations函数</button>
        <hr>
        <button @click="asyncAddNum(20)">直接调用注入Actions函数</button>
        <button @click="add2">通过自己的方法调用注入Actions函数</button>
    </div>
</template>

<script>
// 1.引入辅助函数
import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    data() {
        return {

        };
    },
    computed: {
        // 注意这里的 ... 不是解构辅助函数，而是解构辅助函数的结果
        // 辅助函数会返回一个数组，数组里面有多个方法

        // 2.解构辅助函数,传入一个数组，把数据名作为元素书写
        //  也就是需要哪个数据就在数组写那个数据
        ...mapState(['num','title']),
        ...mapGetters(['dbNum'])
    },
    methods: {
        // 注入的方法直接当成本组件的方法即可！
        ...mapMutations(['addNum']),
        ...mapActions(['asyncAddNum']),
        add(){
            this.addNum(10)
        },
        add2(){
            this.asyncAddNum(20)
        }
    },
};
</script>

<style scoped lang="less">

</style>
